<template>
  <div class="web-study-detail w-nav-height w-content-box">
    <br>
    <h2 class="title w-text-center" @click="reload">
      {{ studyModel.title }}
    </h2>
    <p class="date w-text-center">
      {{ studyModel.date | DateFormat }}
    </p>
    <p class="description w-text-center">
      {{ studyModel.describe }}
    </p>
    <!--marked 解析-->
    <w-marked-parsing :datastr="studyModel.content" />
    <w-comments :api="commentsApi" :comments-list="studyModel.commentsList" @reload="reload"/>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import WMarkedParsing from '@/components/global/marked/custom/parsing'
import { Api } from '@/config/api'
import WComments from '@/components/global/comments'
import Study from '~/models/study'

@Component({
  name: 'WebStudyDetail',
  layout: 'web',
  components: {
    WMarkedParsing,
    WComments
  },
  fetch ({ store }) {
    store.commit('app/SET_NAV_INDEX', '/web/study')
  },
  async asyncData ({ app, route }) {
    const { $wAxios } = app
    const detail = await $wAxios.$get(`${Api.study.detail}${route.params.id}`)
    return { studyModel: detail }
  },
  head () {
    return {
      title: (this as WebTool).studyModel!.title
    }
  }
})
export default class WebTool extends Vue {
  studyModel: Study | null = null
  commentsApi = Api.study.comments

  reload () {
    this.$wAxios.$get(`${Api.study.detail}${this.$route.params.id}`).then((studyModel) => {
      this.studyModel = studyModel
    })
  }
}
</script>

<style scoped lang="less">
.web-study-detail {
  > .date {
    color: #999;
  }
  .date {
    margin: 10px 0;
  }
  > .description {
    color: #666;
    line-height: 24px;
  }
}
</style>
